<template>
  <div id="Login">
    <div class="bg"></div>
    <div class="login-content">
      <h1 class="title">省平台</h1>
      <div class="tab">
        <div @click="tabAction(0)" :class="['tab-item',isSelect==0?'active':'']">平台用户</div>
        <div @click="tabAction(1)" :class="['tab-item',isSelect==1?'active':'']">驾驶员</div>
        <!-- <div @click="tabAction(2)" :class="['tab-item',isSelect==2?'active':'']">驾驶员</div> -->
      </div>
      <div class="from">
        <div class="from-item">
          <img src="./images/username.png" class="icon" />
          <input class="input" placeholder="请输入用户名" v-model="username" />
        </div>
        <div class="from-item">
          <img src="./images/password.png" class="icon" />
          <input
            class="input"
            :type="is_visible?'text':'password'"
            placeholder="请输入密码"
            v-model="password"
          />
          <img
            class="icon_show"
            @click="changeVisible"
            :src="is_visible?require('./images/icon_visible@2x.png'):require('./images/icon_hidden@2x.png')"
          />
        </div>
      </div>
      <div class="text-box">
          <p></p>
          <div  @click="rememberAction" class="remember"><div :class="isRemember?'icon-box':'icon-box-default'"><i v-if="isRemember" class="icon"></i></div><span>记住密码</span></div>
      </div>
      <div class="button" @click="login">登录</div>
    </div>
    <van-dialog v-model="show" show-cancel-button>
      <div class="dialog">
        <div class="dialog-title">
          <p>您的账号下有{{depList.length}}个单位:</p>
          <p>请选择</p>
        </div>
        <select class="select" v-model="deptId">
          <option v-for="(item, index) in depList" :key="index" :value="item.id">{{item.name}}</option>
          
        </select>
      </div>
    </van-dialog>
    <p class="bq">版权所有：©杭州钉铛科技有限公司</p>
  </div>
</template>

<script>
export default {
  name: "history",
  data() {
    return {
      isSelect: 0,
      is_visible: false,
      username: "",
      password: "",
      deptId: "",
      isType: 0,
      show: false,
      depList:[],
      isRemember:true
    };
  },
  mounted() {
    if(localStorage.getItem("isRemember")&&localStorage.getItem("isRemember")=="true"){
      this.isRemember=true
    }else{
      this.isRemember=false
    }
    console.log(this.isRemember);
    //是否记住密码判断
    if(this.isRemember){
      this.username=localStorage.getItem("loginName")
      this.password=localStorage.getItem("password")
  }

  },
  methods: {
    //是否记住密码
    rememberAction(){
       this.isRemember=!this.isRemember
    },
    changeVisible() {
      this.is_visible = !this.is_visible;
    },
    //tab点击事件
    tabAction(index) {
      this.isSelect = index;
      this.isType = index;
    },
    //获取部门列表
    getDepList(callback) {
      this.$http
        .get("/getDepartByLoginName", {
          loginName: this.username
        })
        .then(result => {
            console.log(result);
            let depList=[]
            result.data.map((item)=>{
                depList.push({
                  name:item.name,
                  id:item.id
                })
            })
            if(depList.length<=0){
              return;
            }
            if(depList.length==1){
              this.deptId=depList[0]['id']
            }else{
              this.depList=depList
              this.show=true
              
            }
           callback()
        });
    },
    login() {
     this.getDepList(()=>{
       this.$http
        .post("/appLogin", {
          loginName: this.username, //"何鑫杰",//'admin',
          deptId: this.deptId, //729,
          isType: this.isType, //0,
          password: this.password //'123'
          // loginName:'admin',
          // deptId:682,
          // isType:0,//0,
          // password:'321456'
        })
        .then(result => {
          console.log(result);
          localStorage.token = result.data.token;
          localStorage.userId = result.data.id;
          localStorage.deptId = result.data.deptId;
          localStorage.loginName= result.data.loginName
           localStorage.password= this.password
           localStorage.isRemember=this.isRemember
           
          localStorage.user=JSON.stringify(result.data)
          this.$store.commit({
            type: "setUser",
            data: result.data
          });
         
          if (this.$route.query.redirect) {
            let redirect = this.$route.query.redirect;
            this.$router.push(redirect);
          } else {
            //默认登录成功后进入的页面
            this.$router.replace({ path: "/index" });
          }
        });
     })
      
    }
  }
};
</script>

<style scoped>
.bg {
  position: absolute;
  width: 100%;
  height: 455px;
  background: url("./images/bg@2x.png") no-repeat center;
  background-size: 100% 100%;
  padding: 0 20px;
 

}
.login-content {
  position: relative;
  top: 250px;
  z-index: 99;
  margin:0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.title {
  padding-top: 50px;
  font-size: 50px;
  text-align: center;
}
.tab {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.tab-item {
  width: 160px;
  height: 64px;
  background: rgba(231, 231, 231, 1);
  border: 1px solid rgba(222, 222, 222, 1);
  border-radius: 6px;
  font-size: 28px;
  color: #333333;
  text-align: center;
  line-height: 64px;
  margin-top: 34px;
  margin-right: 20px;
}
.tab-item.active {
  color: rgba(255, 255, 255, 1);
  background: rgba(58, 115, 246, 1);
}
.login-content {
  width: 710px;
  height: 746px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 23px 177px 0px rgba(116, 116, 116, 0.3);
  border-radius: 20px;
}
.icon {
  height: 25px;
  width: 25px;
}
.from {
  margin-top: 20px;
  padding: 0 60px;
}
.input {
  border: none;
  padding: 0 15px;
  font-size: 30px;
  display: inline-block;
  flex: 1;
}
.from-item {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-top: 45px;
  width: 600px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e9e9e9;
}
.icon_show {
  display: inline-block;
  height: 18px;
  width: 32px;
}
.button {
  width: 580px;
  height: 97px;
  background: linear-gradient(
    0deg,
    rgba(104, 149, 254, 1),
    rgba(58, 115, 246, 1)
  );
  box-shadow: 0px 0px 19px 0px rgba(29, 94, 244, 0.38);
  border-radius: 49px;
  text-align: center;
  line-height: 97px;
  color: #ffffff;
  font-size: 36px;
  margin: 40px auto 0 auto;
}
.bq {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  color: #333333;
  font-size: 20px;
}
.dialog {
  padding: 0 50px;
}
.select {
  margin: 30px 0 40px 0;
  width: 520px;
  height: 64px;
  background: rgba(243, 243, 243, 1);
  border: 1px solid rgba(222, 222, 222, 1);
  border-radius: 6px;
  text-align: center;
}
.dialog-title {
  margin-top: 40px;
  line-height: 50px;
  font-size: 36px;
  color: rgba(51, 51, 51, 1);
}

.text-box{
  padding: 32px 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

}
.remember{
  display: flex;
  flex-direction: row;
  align-items: center;
 
}
.icon-box{
  position: relative;
  height: 25px;
  width: 25px;
  border:2px solid rgba(255,48,48,1);
  margin-right: 15px;
}
.icon-box-default{
   position: relative;
  height: 25px;
  width: 25px;
  border:2px solid #E9E9E9;
  margin-right: 15px;
}
.remember .icon{
  position: absolute;
  display: inline-block;
  height: 22px;
  width: 22px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 10px;
  background-image: url("./images/icon_select@2x.png");

}

.remember span{
  color:#333333;
  font-size: 24px;
}
</style>
